<html>
<head>
	<title>AudVis</title>

	<!--[if IE]><script type="text/javascript" src="scripts/excanvas.compiled.js"></script><![endif]-->
	<script src="./scripts/soundmanager2.js" type="text/javascript"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
	<script src="./scripts/canvas.js" type="text/javascript"></script>
	<script src="./scripts/audio.js" type="text/javascript"></script>
	
	<script>
		$(document).ready( function() {
			for (var i = 0; i < peakCount; i++) {
				$('#peakGraph').append('<div class="PeakGraphLine"></div>');	
			}
			$('#peakGraph div').each( function() { peakElem.push( $(this) ); } );	
			
			canvas_init(); 
			
			$(window).resize(function(){
				canvas_resize();
			});
			
			// Make sure sound was loaded
			// NOTE: This will need to be changed once there is more than one sound file being created,
			// otherwise many identical 'message' divs will be created
			
			

		});
	</script>
	<style type="text/css">
		body,html{
			padding: 0;
			margin: 0;
			width: 100%;
			height: 100%;
		}
		.PeakContainer { clear:both; width:304px; border:solid 1px #CCC; padding:1px; margin-bottom:10px; background:gray;}
		#peakL { width:20px; height:300px; background:lightyellow; }
		#peakR { width:20px; height:300px; background:lightblue; }
		
		#peakGraph { height:310px;float:left;clear:both;background:#CCC; padding:2px; border:solid #AAA 1px; }
		.PeakGraphLine { float:left; width:1px; height:50px; background:lightyellow; margin:1px; }
	</style>
</head>
<body >
	<div class="CanvasWrapper">
		<canvas style="z-index: -100; float: left; position: absolute;" id="theCanvas" width="640" height="480"></canvas>
	</div>
	<div>
		<div id="messages"></div>

		<input id='playbutton' type="button" value="play" onclick="sound_toggle_playback();"/> &nbsp; &nbsp;
		<input type="button" value="stop" onclick="mySound.stop();$('#playbutton').val('play');paused=true;"/><br/><br/>

		<!--<div id='peakGraph'>-->

		</div>
	</div>
	
		
</body>
</html>